<template>
  <div class="app">
    <!-- 标题 -->
    <div class="display_title">
      <div>{{ title }}</div>
    </div>
    <!-- 组别 -->
    <div class="display_group">
      <div v-show="group !== '无'">（ {{ group }} ）</div>
    </div>
    <!-- 参赛人员名字 -->
    <div class="display_name">
      <div>
        <p style="font-size: 8vw">{{ name }}</p>
        号选手
      </div>
    </div>
    <!-- 时间 -->
    <div class="display_time">
      <div :class="{ xuanku: isActive }" :style="{ color: timeColor }">
        {{ time_first }}
        <p class="maoHao">:</p>
        {{ time_second }}
      </div>
    </div>
    <div class="full_box">
      <div class="full_screen" @click="timeFullScreen">☩</div>
    </div>
    <!-- 音频元素 -->
    <audio ref="audioPlayer60s" controls @error="handleError">
      <source :src="audioSrc60s" type="audio/mpeg" />
      60s音频
    </audio>
    <audio ref="audioPlayer60" controls @error="handleError">
      <source :src="audioSrc60" type="audio/mpeg" />
      60音频
    </audio>
    <audio ref="audioPlayer30s" controls @error="handleError">
      <source :src="audioSrc30s" type="audio/mpeg" />
      30s音频
    </audio>
    <audio ref="audioPlayerTimeOver" controls @error="handleError">
      <source :src="audioSrcTimeOver" type="audio/mpeg" />
      超时音频
    </audio>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import './display.css'

let title = ref('')
let name = ref('')
let group = ref('组别')
let isPositive = ref(true) // 倒计时状态
let timeline = ref(3) //倒计时提醒时间
let timeColor = ref('rgb(255,234,0)') // 默认为橘色#ffc773
let timer = null
let isActive = ref(false) //超时,每十秒闪烁

const time_first = ref('')
const time_second = ref('')
// 引用音频元素
const audioPlayer60s = ref(null)
const audioPlayer60 = ref(null)
const audioPlayer30s = ref(null)
const audioPlayerTimeOver = ref(null)
// 音频文件路径
const audioSrc60 = new URL('../../../resources/60.mp3', import.meta.url).href
const audioSrc60s = new URL('../../../resources/60s.mp3', import.meta.url).href
const audioSrc30s = new URL('../../../resources/30s.mp3', import.meta.url).href
const audioSrcTimeOver = new URL('../../../resources/TimeOver.mp3', import.meta.url).href
//加载失败
const handleError = (event) => {
  console.error('音频加载失败:', event)
}

onMounted(() => {
  window.electron.on('resMessage-to-time', (data) => {
    console.log(data)
    title.value = data.active_name
    if (data.xuanshou[0] !== undefined) {
      name.value = data.xuanshou[0].id
    } else {
      name.value = '1'
    }
    timeline.value = data.remainTime
    group.value = data.group
    time_first.value = '0' + Number(data.time)
    time_second.value = '00'
  })
  // 按钮切换选手信息
  window.electron.on('changeInfo-to-time', (data) => {
    timeColor.value = 'rgb(255,234,0)'
    name.value = data.group_name
    time_first.value = data.time_first
    time_second.value = data.time_second
    isActive.value = false
  })
  window.electron.on('time-to-time', (data) => {
    time_first.value = data[0]
    time_second.value = data[1]
    name.value = data[2]
    isPositive.value = data[3]
    title.value = data[4]
    if (isPositive.value) {
      if (time_first.value === '01' && time_second.value === '00') {
        play60sAudio()
      }
      if (time_first.value === '00') {
        timeColor = ref('rgb(255, 255, 255)') // 变为白色
      }
      // if (time_first.value === '00' && time_second.value === '30') {
      //   play30sAudio()
      // }
    } else {
      isActive.value = true
    }
    if (time_first.value === '00' && time_second.value === '00') {
      playTimeOverAudio()
    }
  })
  window.electron.reqMessageFromConsole()
})

const clickTime = ref(true)
function timeFullScreen() {
  if (clickTime.value) {
    window.electron.timeFullScreen()
  } else {
    window.electron.timeNoFullScreen()
  }
  clickTime.value = !clickTime.value
}
// 播放60s音频
const play60sAudio = () => {
  if (audioPlayer60s.value) {
    audioPlayer60s.value.play()
  }
}

// 播放30s音频
const play30sAudio = () => {
  if (audioPlayer30s.value) {
    audioPlayer30s.value.play()
  }
}

// 播放超时音频
const playTimeOverAudio = () => {
  //播放超时音频
  if (audioPlayerTimeOver.value) {
    audioPlayerTimeOver.value.play()
  }
}

onUnmounted(() => {
  clearInterval(timer)
})
</script>
